<template>
  <van-collapse-item :title="`线下预算（小计：￥${totalPrice}）`" name="offlinePrice">
    <div class="meeging_price_explain">
      <p>
        开票信息及邮寄地址
        <div>开票信息：北京天正远科技有... <span class="text-primary" @click="clickCopyKPXX">复制完整开票信息</span></div>
        <div>邮寄地址：北京市朝阳区东三... <span class="text-primary" @click="clickCopyYJXX">复制完整邮寄地址</span></div>
      </p>
    </div>

    <div class="card-container">
      <van-field
        v-model="params.price1"
        label="餐费"
        type="number"
        placeholder="请输入餐费"
      >
        <template #extra>元</template>
      </van-field>
      <van-field
        v-model="params.price2"
        label="交通费"
        type="number"
        placeholder="请输入交通费"
      >
        <template #extra>元</template>
      </van-field>
      <van-field
        v-model="params.price3"
        label="场地费"
        type="number"
        placeholder="请输入场地费"
      >
        <template #extra>元</template>
      </van-field>
      <van-field
        v-model="params.price4"
        label="物料费"
        type="number"
        placeholder="请输入物料费"
      >
        <template #extra>元</template>
      </van-field>
      <van-field
        v-model="params.price7"
        label="住宿费"
        type="number"
        placeholder="请输入住宿费"
      >
        <template #extra>元</template>
      </van-field>
    </div>
  </van-collapse-item>
</template>

<script setup>
import useClipboard from 'vue-clipboard3'
import { computed, toRefs, reactive, watch } from 'vue'
import { showSuccessToast, showToast } from 'vant';
import useUtils from '@/hooks/useUtils'

const { toClipboard } = useClipboard()
const { getPrice } = useUtils();

const emits = defineEmits(['updatePrice']);
const props = defineProps({
  speakerList: {
    type: Array,
    default: () => ([])
  }
})
const params = reactive({
  price1: '',
  price2: '',
  price3: '',
  price4: '',
  price7: '',
})
// const meetingPrice = ([]);

watch(params, () => emits('updatePrice'));
// 获取讲者数量
const getSpeakerList = computed(() => {
  const { speakerList } = toRefs(props);
  return speakerList.value || 0
})
const totalPrice = computed(() => {
  let price = 800
  if (getSpeakerList.value) {
    price += getSpeakerList.value.length * 85;
  }

  // (meetingPrice.value || []).forEach(item => {
  //   if (item.fee) {
  //     price += Number.parseFloat(item.fee);
  //   }
  // })

  Object.values(params).forEach(val => {
    price += Number.parseFloat(val || 0);
  })

  return getPrice(price);
})

// 开票信息复制
const clickCopyKPXX = async () => {
	try {
		await toClipboard(`抬头类型：单位\n
抬头：北京天正远科技有限公司\n
税号：91110105MA00CG4Q4B\n
单位地址：北京市朝阳区朝阳北路145号13号楼（六里屯孵化器5114号）\n
电话号码：18513153165\n
开户银行：工商银行北京分行商务中心区日坛路支行\n
银行账户：0200062909024549110\n
开票类型：普票`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

// 开票信息复制
const clickCopyYJXX = async () => {
	try {
		await toClipboard(`北京市朝阳区东三环中路39号建外SOHO B座 1805  李珊珊 15133578369`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

defineExpose({
  getParams: () => {
    return [
      { category: 1, budgetFee: params.price1 },
      { category: 2, budgetFee: params.price2 },
      { category: 3, budgetFee: params.price3 },
      { category: 4, budgetFee: params.price4 },
      { category: 7, budgetFee: params.price7 },
    ]
  },
  setParams (detail) {
    (detail.costs || []).forEach(item => {
      switch (`price${item.category}`) {
        case 'price1':
        case 'price2':
        case 'price3':
        case 'price4':
        case 'price7':
          params[`price${item.category}`] = item.budgetFee
          break;
      }
    })
  },
  getTotalPrice () {
    let price = 0;
    Object.keys(params).forEach(item => {
      price += Number.parseFloat(params[item] || 0);
    })

    return price
  }
})
</script>